@use "../../assets/scss/mixins/base" as mx;

$width: 50px;
$eraser-color: #ad7cad;
$stripe-color: black;
$eraser-holder-color: #dde;
$wood-cover-color: red;
$naked-wood-color: #fbf395;
$graphite-color: #111;

body {
  background-color: #b2ff92;
}
.pencil {
  position: relative;
  width: $width;
  margin: 50px auto;
  filter: drop-shadow(8px 2px 4px transparentize($graphite-color, 0.4));
  .eraser {
    @include mx.wh($width, calc($width / 1.6));
    background: linear-gradient(
      to left,
      darken($eraser-color, 10%),
      lighten($eraser-color, 10%)
    );
    border-radius: calc($width / 3) calc($width / 3) 0 0;
  }
  .covered-wood {
    .eraser-holder {
      width: $width;
      height: calc($width / 2.5);
      background: $eraser-holder-color
        linear-gradient(
          0deg,
          transparent 0%,
          transparent 20%,
          $stripe-color 0%,
          $stripe-color 35%,
          transparent 0%,
          transparent 42.5%,
          $stripe-color 0%,
          $stripe-color 57.5%,
          transparent 0%,
          transparent 65%,
          $stripe-color 0%,
          $stripe-color 80%,
          transparent 0%
        );
    }
  }
  .wooden-part {
    background: linear-gradient(
      90deg,
      darken($wood-cover-color, 10%) 25%,
      $wood-cover-color 25%,
      $wood-cover-color 50%,
      lighten($wood-cover-color, 20%) 0,
      lighten($wood-cover-color, 20%) 75%,
      lighten($wood-cover-color, 10%) 0
    );
    @include mx.wh($width, calc($width * 3.5));
    transform: scaleX(-1);
  }

  $slope: 2.8;
  .naked-wood {
    @include mx.wh(0, 0);
    position: relative;
    border-top: calc($width * $slope / 2) solid $naked-wood-color;
    border-left: calc($width / 2) solid transparent;
    border-right: calc($width / 2) solid transparent;
    @include mx.pseudo-ba {
      display: block;
      width: 0;
      height: 0;
      border-bottom: calc($width / 4) solid $naked-wood-color;
      border-left: calc($width / 4) solid transparent;
      border-right: calc($width / 4) solid transparent;
      top: -(calc($slope / 2 + 0.25) * $width);
    }
    &::before {
      left: calc($width / -2);
    }
  }
  .graphite {
    width: 0;
    height: 0;
    border-top: calc($width * $slope / 4) solid $graphite-color;
    position: absolute;
    border-left: calc($width / 4) solid transparent;
    border-right: calc($width / 4) solid transparent;
    left: calc($width / 2) - calc($width / 4);
    bottom: 0;
    &::after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border-top: calc($width * $slope / 4) solid #aaa;
      border-left: calc($width / 6) solid transparent;
      border-right: 0 solid transparent;
      //   left: calc($width / 4);
      top: calc($width * $slope / -4);
      left: calc($width / -6);
    }
  }
}
